<!--
 * @Date: 2022-04-07 10:23:22
 * @Author: 陶子
 * @LastEditTime: 2022-04-07 18:15:40
 * @FilePath: \jk_one-stop_cloud_mobile_v1.0\src\views\mine\feedback.vue
 * @pageName: 这是--(意见反馈)--页面
-->
<template>
  <div class="wrap">
    <Navbar :appTitle="title" />
    <div class="formContain">
      <div class="messageBox">
        <van-cell-group class="formItemFlex">
          <p class="label required FormTit"><span></span>旧密码</p>
          <div class="haveUnitBox">
            <van-field
              v-model="userInfo.oldpassword"
              input-align="left"
              placeholder="请输入旧密码"
              type="password"
              clearable
            />
          </div>
        </van-cell-group>
        <div class="bottomLine"></div>
        <van-cell-group class="formItemFlex">
          <p class="label required FormTit"><span></span>新密码</p>
          <div class="haveUnitBox">
            <van-field
              v-model="userInfo.password"
              input-align="left"
              placeholder="请输入新密码(6至12位数字或字母)"
              type="password"
              clearable
            />
          </div>
        </van-cell-group>
        <div class="bottomLine"></div>
        <van-cell-group class="formItemFlex">
          <p class="label required FormTit"><span></span>确认密码</p>
          <div class="haveUnitBox">
            <van-field
              v-model="userInfo.confirmpassword"
              input-align="left"
              placeholder="请再次输入新密码"
              type="password"
              clearable
            />
          </div>
        </van-cell-group>
      </div>
      <van-button color="#2b85e4" class="button" type="info" @click="beforeSubmit" :loading="loading">提交</van-button>
    </div>
  </div>
</template>
<script>
import Navbar from "@/components/navBar/navBar_right";
import {
  changePassword
} from "@/api/api";
import store from "@/store";

export default {
  data() {
    return {
      title: this.$route.meta.title,
      userInfo:{
        oldpassword: '',
        password: '',
        confirmpassword: ''
      },
      loading: false
    };
  },
  components: {
    Navbar,
  },
  watch: {},
  created() {
    store.commit("SET_CURRENT_PREFIX", "/jksaas-mgt/mgt");
  },
  mounted() {},
  methods: {
    beforeSubmit() {
      try {
        if(this.userInfo.oldpassword == '') {
          throw new Error(`请输入旧密码（6至12位数字、字母或符号）!`);
        }else {
          if(new RegExp(/[\u4e00-\u9fa5]/).test(this.userInfo.oldpassword)){
            throw new Error('密码为6至12位的字母、数字、符号或任意组合!')
          }
          if(!new RegExp(/^[a-zA-Z0-9\W]{6,12}$/).test(this.userInfo.oldpassword)){
            throw new Error('密码为6至12位的字母、数字、符号或任意组合!')
          } 
        }

        if(this.userInfo.password == '') {
          throw new Error(`请输入新密码（6至12位数字、字母或符号）!`);
        }else {
          if(new RegExp(/[\u4e00-\u9fa5]/).test(this.userInfo.password)){
            throw new Error('密码为6至12位的字母、数字、符号或任意组合!')
          }
          if(!new RegExp(/^[a-zA-Z0-9\W]{6,12}$/).test(this.userInfo.password)){
            throw new Error('密码为6至12位的字母、数字、符号或任意组合!')
          } 
        }

        if(this.userInfo.confirmpassword == '') {
          throw new Error(`请再次输入新密码（6至12位数字、字母或符号）!`);
        }else {
          if(new RegExp(/[\u4e00-\u9fa5]/).test(this.userInfo.confirmpassword)){
            throw new Error('密码为6至12位的字母、数字、符号或任意组合!')
          }
          if(!new RegExp(/^[a-zA-Z0-9\W]{6,12}$/).test(this.userInfo.confirmpassword)){
            throw new Error('密码为6至12位的字母、数字、符号或任意组合!')
          } 
        }

        if(this.userInfo.confirmpassword !== this.userInfo.password){
          throw new Error('两次密码不一致!')
        }
      }catch(error) {
        this.$toast(error.message);
        return false;
      }

      this.handleSubmit()
    },
    handleSubmit () {
      this.loading = true
      changePassword(this.userInfo).then((res) => {
        if (res.success) {
          this.$toast(res.message);
          this.resetForm()
        } else {
          this.$toast(res.message);
        }
      }).catch((err) => {
         
      }).finalyly(() => {
        this.loading = false;
      });
    },
    // 重置form表单
    resetForm () {
      this.userInfo = {
        oldpassword: '',
        password: '',
        confirmpassword: ''
      }
    },
  },
};
</script>
<style lang='scss' scoped>
.formContain {
  background-color: #f2f2f6;
  box-sizing: border-box;
  height: calc(100vh - 270px);
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}
.messageBox {
  margin: 20px 0;
}
.formItemFlex {
  display: flex;
  flex-direction: row;
  .FormTit {
    min-width: 3.3rem;
    padding-top: 0.33rem;
    margin-bottom: 0;
    p {
      margin-bottom: 0;
    }
    span {
      padding: 0 6px;
    }
  }
  .haveUnitBox {
    flex: 1;
    /deep/ .van-field__control {
      color: #969799;
    }
  }
}
.bottomLine {
  height: 1px;
  background-color: #f2f2f2;
  margin: 0 2px;
}
.button {
  margin: 10px 20px;
}
</style>
